<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/template.js"></script>
    <script src="./js/hash-router.js"></script>
    <title>hash路由模拟实现</title>
</head>

<body>
<div id="content">
    <!-- 点击a标签进行hash路由跳转 -->
    <a href="#/shopping">购物车</a>
    <a href="#/food">菜品信息</a>
    <a href="#/review">评论信息</a>
    <a href="#/erew">404</a>

    <!-- 切换的组件在这里渲染 -->
    <div id="router-view"></div>
</div>
<script type="text/javascript">
    /**
     * 模拟组件数组
     * @params {string} name 组件名字
     * @params {template} component 组件模板
     */
    let components = [{
        name: 'shopping',
        component: templateShopping
    },
        {
            name: 'review',
            component: templateReview
        },
        {
            name: 'food',
            component: templateFood
        },
    ];

    //新建一个路由集合
    let routers = new router();
    //为这个路由集合注册路由
    routers.register({
        path: '/shopping',
        component: 'shopping'
    });
    routers.register({
        path: '/food',
        component: 'food'
    });
    routers.register({
        path: '/review',
        component: 'review'
    });
</script>
</body>

</html>
